// 导入区
import VueRouter from "vue-router"
import Vue from "vue"
import LoginUser from "@/views/login.vue"
import HomePage from "@/views/home.vue"
import page1 from '@/views/page1.vue'
import page2 from '@/views/page2.vue'
Vue.use(VueRouter);
// routes区----配置路由区
 let routes=[
    {
        // path："/home"
        // 记得使用/home/:id/:title
        path:"/",//路由查询路径
        component:HomePage,//组件的来源
        name:"home",//可以使用name属性代替path属性进行查询
        meta:{
            title: "用户列表",breadcrumb: "用户管理"
        },
        // redirect重定向
        // redirect:"/home",
        children:[
            { path: "/home", name: "home", component: HomePage,
            // redirect:"/page1",
            children:[
                { path: "/page1", name: "page1", component:  page1},
                { path: "/page2", name: "page2", component:  page2}
            ]
        },
        ] 
        //提供元数据
         // 第一种 对象形式 props接收参数       
        // props:{
        //     id: '888',
        //     title: '你好啊'
        // },   
        // 第二种方式 1.
        // 接收参数 props
        // 使用params 只能使用name作为标识
        // 使用query 可以使用name和path作为标识
        // 方式的区别：params直接写在路径上面 query send({id:123})
        // params 请求头 query请求体
        // params query
        // props: false,  
        // 第三种 ，函数式
        // props($route) {
        //     console.log("rooot",$route);
        //     return {
        //         id: $route.params.id,
        //         title: $route.params.title,
        //         // 还可以返回一些别的数据
        //         // a: 1,
        //         // b: "hello"
        //     }
        // },
        // alias:'/qwe',// 为当前路由提供一个或多个别名，访问别名时会展示与原路由相同的组件内容。      
            
    },
    {
        // 访问的名称
        path:"/login",
        // 文件的路径
        component:LoginUser
    },
    // {
    //     path:"/home",
    //     component:HomePage
    // }
]
// Object.key
// 路由实例化 --所有路由配置区
const router = new VueRouter({
    // 路由配置的集合
    routes:routes
})
export default router